<template>
  <view class="weather-background" :class="{ 'changing': isChanging }">
    <!-- 当前背景 -->
    <view 
      class="bg-layer current-bg" 
      :class="{ 'fade-out': isChanging }"
      :style="{ backgroundImage: `url(${currentBackground})` }"
    ></view>
    
    <!-- 新背景（切换时显示） -->
    <view 
      v-if="isChanging"
      class="bg-layer new-bg fade-in"
      :style="{ backgroundImage: `url(${newBackground})` }"
    ></view>
    
    <!-- 背景遮罩层 -->
    <view class="bg-overlay"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  weather: string
  isDaytime: boolean
}

const props = defineProps<Props>()

// 背景切换状态
const isChanging = ref(false)
const currentBackground = ref('')
const newBackground = ref('')

// 天气背景图片映射 - 使用静态图片，不区分白天夜晚
const weatherBackgroundMap: Record<string, string> = {
  // 晴天
  '晴': '/static/images/backgrounds/sunny-bg.png',
  '晴天': '/static/images/backgrounds/sunny-bg.png',
  
  // 多云
  '多云': '/static/images/backgrounds/cloudy-bg.png',
  
  // 阴天
  '阴': '/static/images/backgrounds/overcast-bg.png',
  '阴天': '/static/images/backgrounds/overcast-bg.png',
  
  // 雨天
  '小雨': '/static/images/backgrounds/light-rain-bg.png',
  '中雨': '/static/images/backgrounds/rain-bg.png',
  '大雨': '/static/images/backgrounds/heavy-rain-bg.png',
  '暴雨': '/static/images/backgrounds/torrential-rain-bg.png',
  '阵雨': '/static/images/backgrounds/showers-bg.png',
  '雷阵雨': '/static/images/backgrounds/thunderstorm-bg.png',
  
  // 雪天
  '小雪': '/static/images/backgrounds/light-snow-bg.png',
  '中雪': '/static/images/backgrounds/snow-bg.png',
  '大雪': '/static/images/backgrounds/heavy-snow-bg.png',
  '雨夹雪': '/static/images/backgrounds/sleet-bg.png',
  
  // 特殊天气
  '冰雹': '/static/images/backgrounds/hail-bg.png',
  '霜冻': '/static/images/backgrounds/frost-bg.png',
  '雾霾': '/static/images/backgrounds/haze-bg.png',
  '雾': '/static/images/backgrounds/haze-bg.png',
  '霾': '/static/images/backgrounds/haze-bg.png',
  '大风': '/static/images/backgrounds/strong-wind-bg.png',
  
  // 默认背景
  'default': '/static/images/backgrounds/default-bg.png'
}

// 计算当前应该显示的背景
const getBackgroundUrl = (weather: string) => {
  return weatherBackgroundMap[weather] || weatherBackgroundMap['default']
}

// 监听天气变化，实现背景切换
watch(
  () => props.weather,
  (newWeather, oldWeather) => {
    const newBg = getBackgroundUrl(newWeather)
    
    // 如果是第一次加载或者天气没有变化，直接设置背景
    if (!currentBackground.value || newWeather === oldWeather) {
      currentBackground.value = newBg
      return
    }
    
    // 开始背景切换动画
    isChanging.value = true
    newBackground.value = newBg
    
    // 动画完成后更新当前背景
    setTimeout(() => {
      currentBackground.value = newBackground.value
      isChanging.value = false
      newBackground.value = ''
    }, 800) // 动画持续时间
  },
  { immediate: true }
)

// 初始化默认背景
if (!currentBackground.value) {
  currentBackground.value = getBackgroundUrl(props.weather)
}
</script>

<style lang="scss" scoped>
.weather-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  
  &.changing {
    .bg-layer.new-bg {
      animation: scaleFade 0.8s ease-out;
    }
  }
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease-in-out;
  
  &.current-bg {
    opacity: 1;
    
    &.fade-out {
      opacity: 0;
    }
  }
  
  &.new-bg {
    opacity: 0;
    transform: scale(1.3);
    
    &.fade-in {
      opacity: 1;
      transform: scale(1);
    }
  }
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.3) 0%,
    rgba(118, 75, 162, 0.2) 50%,
    rgba(123, 104, 238, 0.3) 100%
  );
  backdrop-filter: blur(1rpx);
}

@keyframes scaleFade {
  0% { 
    transform: scale(1.3);
    opacity: 0;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% { 
    transform: scale(1);
    opacity: 1;
  }
}
</style>